<%@ page import="java.util.List" %>
<%@ page import="com.hzit.bean.Emp" %>

<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/10/10 0010
  Time: 13:59
  To change this template use File | Settings | File Templates.

  page:表示当前jsp页面的指令，设置页面的属性
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>表格</title>
    <link rel="stylesheet" href="../frame/layui/css/layui.css">
    <link rel="stylesheet" href="../frame/static/css/style.css">
    <link rel="icon" href="../frame/static/image/code.png">
</head>
<body class="body">


<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>默认表格</legend>
</fieldset>

<div class="layui-fluid">
    <div class="layui-row">
        <div class="layui-col-lg8 layui-col-lg-offset2">
            <h1 style="text-align: center">添加员工</h1>
        </div>
    </div>
    <div class="layui-row">
        <div class="layui-col-lg8 layui-col-lg-offset2">

            <%--            添加的服务器:添加servlet--%>
            <form class="layui-form" action="${pageContext.request.contextPath}/emp/add" method="post">
                <div class="layui-form-item">
                    <label class="layui-form-label">员工姓名</label>
                    <div class="layui-input-block">
                        <input type="text" name="ename" required lay-verify="required" placeholder="请输入名称"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">工作职位</label>
                    <div class="layui-input-block">
                        <input type="text" name="job" required lay-verify="required" placeholder="请输入职位"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">上级编号</label>
                    <div class="layui-input-block">
                        <input type="number" name="mgr" required lay-verify="required" placeholder="上级编号"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">入职时间</label>
                    <div class="layui-input-block">
                        <input type="text" name="hireDate" required lay-verify="required" placeholder="yyyy-MM-dd"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">薪资</label>
                    <div class="layui-input-block">
                        <input type="number" name="sal" required lay-verify="required" placeholder="请输入薪资"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">部门编号</label>
                    <div class="layui-input-block">
                        <%--                        <input type="number" name="deptno" required lay-verify="required" placeholder="请输入部门编号"--%>
                        <%--                               autocomplete="off" class="layui-input">--%>
                        <select name="deptno">
                            <option value="">请选择部门</option>
                        </select>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>

        </div>
    </div>

</div>


<script type="text/javascript" src="../frame/layui/layui.js"></script>
<script type="text/javascript">
    //Demo
    layui.use(['form', 'jquery', 'layer'], function () {
        var form = layui.form,
            $ = layui.$,
            layer = layui.layer;



        //检测用户名是否存在
        $("[name='ename']").blur(function () {

            //1.获取name
            var ename = $(this).val();

            //2.偷偷发起ajax请求验证是否存在
            <%--$.ajax({--%>
            <%--    type: "GET", //请求方式  get|post--%>
            <%--    url: "${pageContext.request.contextPath}/emp/check/ename",//请求服务路径--%>
            <%--    data: {"ename": ename}, //参数--%>
            <%--    dataType: "text",  //返回值类型--%>
            <%--    async: true,//是否异步--%>
            <%--    cache: true, //是否缓存--%>
            <%--    success: function (result) { //成功回调--%>
            <%--        //result服务器返回的结果。（数据取决于服务器）--%>
            <%--        if (result=="true") {  //服务器规定  true:存在 不可用  false:不存在，可用--%>
            <%--            layer.msg("该用户名，已经存在");--%>
            <%--        } else {--%>
            <%--            layer.msg("可用");--%>
            <%--        }--%>

            <%--    },--%>
            <%--    error: function (err) {--%>
            <%--        //错误的回调函数--%>
            <%--        alert(err);--%>
            <%--    }--%>
            <%--});--%>

            //$.get()实现  该方法四个参数
            $.get("${pageContext.request.contextPath}/emp/check/ename", {"ename": ename}, function (result) {
                if (result == "true") {  //服务器规定  true:存在 不可用  false:不存在，可用
                    layer.msg("该用户名，已经存在--get");
                } else {
                    layer.msg("可用");
                }
            }, "text");

            //$.post() 和 $.get()用法一致，请求post方式

            //3.接收验证结果，js通知用户

        });


        //初始化加载部门信息  数据来源: ajax---获取服务器数据库
        // var deptList = [{"deptno": 1, "dname": "研发部", "loc": "深圳华美居"}, {
        //     "deptno": 2,
        //     "dname": "财务部",
        //     "loc": "深圳华美居D区一号楼"
        // }, {"deptno": 3, "dname": "人事部", "loc": "深圳华美居"}];

        $.get("${pageContext.request.contextPath}/dept/ajax/findAll", function (result) {

            $.each(result, function (index, dept) {
                var options = $("<option value='" + dept.deptno + "'>" + dept.dname + "</option>");

                $("[name=deptno]").append(options);

            });
            form.render('select');
        }, "json");

        //监听提交
        form.on('submit(formDemo)', function (data) {
            //layer.msg(JSON.stringify(data.field));
            return true;
        });
    });
</script>
</body>
</html>